import React, { useState } from 'react';
import './vote.less';

export default function Vote(props) {
  let [state, setState] = useState({
    supNum: 10,
    oppNum: 5,
  });
  const handle = (type) => {
    if (type === 'sup') {
      setState({
        ...state, //在修改值之前,先把原有的所有状态，都展开赋值给新对象，再去修改要改动的哪一项值。
        supNum: state.supNum + 1,
      });
      return;
    }
    setState({
      ...state,
      oppNum: state.oppNum + 1,
    });
  };
  return (
    <>
      <div className='vote-header'>
        <h2 className='title'>{props.title}</h2>
        <span>{state.supNum + state.oppNum}</span>
      </div>
      <div className='vote-main'>
        <p>支持人数:{state.supNum}</p>
        <p>反对人数:{state.oppNum}</p>
      </div>
      <div className='vote-footer'>
        <button onClick={handle.bind(null, 'sup')}>支持</button>
        <button onClick={handle.bind(null, 'opp')}>反对</button>
      </div>
    </>
  );
}

/*
  官方建议：需要多个状态,就把useState执行多次即可
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);
  const handle = (type) => {
    if (type === 'sup') {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };
  */
